<template>
	<view class="menubox">
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
			<view class="scroll-view-item_H" :style="'width:' + 100 / totle + '%'" @click="changeMenu(index, d)" :class="{ act: act == index }" v-for="(d, index) in list" :key="index">
					<text>{{ d.name }}</text>
					<text v-if="d.num" class="fs-24">({{ d.num }})</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'uni-menu',
	props: {
		list: {
			type: Array,
			default: () => [{ name: '农事操作' }, { name: '用药用肥' }]
		}
	},
	data() {
		return {
			act: 0
		};
	},
	computed: {
		totle: function() {
			return this.list.length;
		}
	},
	methods: {
		changeMenu(index, d) {
			this.act = index;
			this.$emit('mchange', index);
		}
	}
};
</script>

<style lang="scss">
.menubox{
	margin: 20rpx 30rpx 0;
}
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
	background: #8dd16b;
	color: #fff;
	border-radius: 40rpx;
	.scroll-view-item_H {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.act {
		background: #64c533;
		border-radius: 40rpx;
	}
}
</style>
